<!-- directive:title button样式 -->
<!-- directive:breadcrumb button样式 -->
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <h4 class="m-t-xs">Button options</h4>
            <div>
                <button class="btn btn-default">Default</button>
                <button class="btn btn-primary">Primary</button>
                <button class="btn btn-success">Success</button>
                <button class="btn btn-info">Info</button>
                <button class="btn btn-warning">Warning</button>
                <button class="btn btn-danger">Danger</button>
                <button class="btn btn-dark">Dark</button>
                <button class="btn btn-default disabled">Disabled</button>
            </div>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-default">Default</button>
                <button class="btn btn-primary">Primary</button>
                <button class="btn btn-success">Success</button>
                <button class="btn btn-info">Info</button>
                <button class="btn btn-warning">Warning</button>
                <button class="btn btn-danger">Danger</button>
                <button class="btn btn-dark">Dark</button>
                <button class="btn btn-default disabled">Disabled</button>
            </script>
            <h4 class="m-t">Button size</h4>
            <p>
                <button class="btn btn-default btn-lg">Large</button>
                <button class="btn btn-default">Default button</button>
                <button class="btn btn-default btn-sm">Small button</button>
                <button class="btn btn-default btn-xs">Extra small button</button>
            </p>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-default btn-lg">Large</button>
                <button class="btn btn-default">Default button</button>
                <button class="btn btn-default btn-sm">Small button</button>
                <button class="btn btn-default btn-xs">Extra small button</button>
            </script>
            <p class="text-muted">Justified button groups</p>
            <div class="m-b-sm">
                <div class="btn-group btn-group-justified">
                    <a href class="btn btn-primary">Left</a>
                    <a href class="btn btn-info">Middle</a>
                    <a href class="btn btn-success">Right</a>
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn-group btn-group-justified">
                    <a href class="btn btn-primary">Left</a>
                    <a href class="btn btn-info">Middle</a>
                    <a href class="btn btn-success">Right</a>
                </div>
            </script>
            <h4 class="m-t-xs">Button dropdowns</h4>
            <p class="text-muted">Single button dropdowns</p>
            <div class="m-b-sm">
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default" dropdown-toggle>Action <span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-success" dropdown-toggle>Action <span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default btn-sm" dropdown-toggle>Action <span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default btn-xs" dropdown-toggle>Action <span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default" dropdown-toggle>Action <span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
            </script>
            <p class="text-muted">Split button dropdowns & variation </p>
            <div class="m-b-sm">
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default">Action</button>
                    <button class="btn btn-default" dropdown-toggle><span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
                <div class="btn-group dropdown dropup" dropdown>
                    <button class="btn btn-default">Action</button>
                    <button class="btn btn-default" dropdown-toggle><span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn-group dropdown" dropdown>
                    <button class="btn btn-default">Action</button>
                    <button class="btn btn-default" dropdown-toggle><span class="caret"></span></button>
                    <ul class="dropdown-menu"> <li><a href>Action</a></li> <li><a href>Another action</a></li> <li><a href>Something else here</a></li> <li class="divider"></li> <li><a href>Separated link</a></li> </ul>
                </div>
            </script>
            <p class="text-muted">Nested button groups</p>
            <div class="btn-group m-b-sm">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-success">2</button>
                <button type="button" class="btn btn-default">3</button>
                <div class="btn-group dropdown" dropdown>
                    <button type="button" class="btn btn-default" dropdown-toggle> Dropdown <span class="caret"></span> </button>
                    <ul class="dropdown-menu"> <li><a href>Dropdown link</a></li> <li><a href>Dropdown link</a></li> <li><a href>Dropdown link</a></li> </ul>
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-success">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <div class="btn-group dropdown" dropdown>
                        <button type="button" class="btn btn-default" dropdown-toggle> Dropdown <span class="caret"></span> </button>
                        <ul class="dropdown-menu"> <li><a href>Dropdown link</a></li> <li><a href>Dropdown link</a></li> <li><a href>Dropdown link</a></li> </ul>
                    </div>
                </div>
            </script>
            <h4 class="m-t-xs"> Button icon rounded </h4>
            <p>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-facebook"></i></button>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-google-plus"></i></button>
            </p>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-facebook"></i></button>
                <button class="btn btn-rounded btn-icon btn-default"><i class="fa fa-google-plus"></i></button>
            </script>
            <p class="text-muted">Multiple button groups</p>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-default active">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <button type="button" class="btn btn-default">4</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">5</button>
                    <button type="button" class="btn btn-default">6</button>
                    <button type="button" class="btn btn-default">7</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">8</button>
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">1</button>
                        <button type="button" class="btn btn-default active">2</button>
                        <button type="button" class="btn btn-default">3</button>
                        <button type="button" class="btn btn-default">4</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">5</button>
                        <button type="button" class="btn btn-default">6</button>
                        <button type="button" class="btn btn-default">7</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">8</button>
                    </div>
                </div>
            </script>
            <h4 class="m-t-xs">Button groups</h4>
            <div class="m-b-sm">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Left</button>
                    <button type="button" class="btn btn-default">Middle</button>
                    <button type="button" class="btn btn-default">Right</button>
                </div>
            </div>
            <p class="text-muted">Vertical button groups</p>
            <div class="btn-group-vertical m-b-sm">
                <button type="button" class="btn btn-default">Top</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Bottom</button>
            </div>
            <h4 class="m-t-xs">
                Social buttons
                <button class="btn btn-default" ui-toggle-class="btn-rounded" target="#social-buttons button">Toggle</button>
            </h4>
            <p id="social-buttons">
                <button class="btn btn-rounded btn-sm btn-info"><i class="fa fa-fw fa-twitter"></i> Twitter</button>
                <button class="btn btn-rounded btn-sm btn-danger"><i class="fa fa-fw fa-google-plus"></i> Google+</button>
            </p>
            <h4 class="m-t-xs"> Button addon </h4>
            <p>
                <button class="btn m-b-xs btn-primary btn-addon"><i class="fa fa-plus"></i>Primary</button>
                <button class="btn m-b-xs btn-info btn-addon"><i class="fa fa-trash-o"></i>Info</button>
                <button class="btn m-b-xs btn-success btn-addon"><i class="fa fa-minus pull-right"></i>Success</button>
                <button class="btn m-b-xs btn-warning btn-addon"><i class="fa fa-circle"></i>Warning</button>
                <button class="btn m-b-xs btn-default btn-addon"><i class="fa fa-plus"></i>Default</button>
                <button class="btn btn-default btn-addon"><i class="fa fa-music"></i>Default</button>
                <button class="btn btn-info btn-addon"><i class="fa fa-play"></i>Info</button>
            </p>
            <script type="text/xianjs" ui-bs>
                <button class="btn m-b-xs btn-primary btn-addon"><i class="fa fa-plus"></i>Primary</button>
                <button class="btn m-b-xs btn-info btn-addon"><i class="fa fa-trash-o"></i>Info</button>
                <button class="btn m-b-xs btn-success btn-addon"><i class="fa fa-minus pull-right"></i>Success</button>
                <button class="btn m-b-xs btn-warning btn-addon"><i class="fa fa-circle"></i>Warning</button>
                <button class="btn m-b-xs btn-default btn-addon"><i class="fa fa-plus"></i>Default</button>
                <button class="btn btn-default btn-addon"><i class="fa fa-music"></i>Default</button>
                <button class="btn btn-info btn-addon"><i class="fa fa-play"></i>Info</button>
            </script>
            <h4 class="m-t-xs">Rounded button</h4>
            <div>
                <button class="btn btn-default btn-rounded">Default</button>
                <button class="btn btn-primary btn-rounded">Primary</button>
                <button class="btn btn-success btn-rounded">Success</button>
                <button class="btn btn-info btn-rounded">Info</button>
                <button class="btn btn-warning btn-rounded">Warning</button>
                <button class="btn btn-danger btn-rounded">Danger</button>
                <button class="btn btn-dark btn-rounded">Dark</button>
                <button class="btn btn-default btn-rounded disabled">Disabled</button>
            </div>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-default btn-rounded">Default</button>
                <button class="btn btn-primary btn-rounded">Primary</button>
                <button class="btn btn-success btn-rounded">Success</button>
                <button class="btn btn-info btn-rounded">Info</button>
                <button class="btn btn-warning btn-rounded">Warning</button>
                <button class="btn btn-danger btn-rounded">Danger</button>
                <button class="btn btn-dark btn-rounded">Dark</button>
                <button class="btn btn-default btn-rounded disabled">Disabled</button>
            </script>
            <h4 class="m-t-xs">Block button</h4>
            <p>
                <button class="btn btn-default btn-lg btn-block"><i class="fa fa-bars pull-right"></i> Block button with icon</button>
                <button class="btn btn-default btn-block"><i class="fa fa-bars pull-left"></i> Block button with icon</button>
            </p>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-default btn-lg btn-block"><i class="fa fa-bars pull-right"></i> Block button with icon</button>
                <button class="btn btn-default btn-block"><i class="fa fa-bars pull-left"></i> Block button with icon</button>
            </script>
            <h4 class="m-t-xs">Button with icon</h4>
            <p>
                <button class="btn btn-default"><i class="fa fa-html5"></i> Html5</button>
                <button class="btn btn-info"><i class="fa fa-css3"></i> CSS3</button>
                <button class="btn btn-icon btn-info"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-icon btn-danger"><i class="fa fa-google-plus"></i></button>
            </p>
            <script type="text/xianjs" ui-bs>
                <button class="btn btn-default"><i class="fa fa-html5"></i> Html5</button>
                <button class="btn btn-info"><i class="fa fa-css3"></i> CSS3</button>
                <button class="btn btn-icon btn-info"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-icon btn-danger"><i class="fa fa-google-plus"></i></button>
            </script>
        </div>
    </div>
</div>

